<template>
    <main>
        <mt-header fixed title="图书搜索">
            <router-link to="holle" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <input type="text" :value="value='遮天'" style="width:70%;height:30px;line-height: 30px;" v-model="value">
        <mt-button @click="search(value)">Search</mt-button>
        <div>
            <ul class="books-box">
                <li class="box-item box" v-for="item in booksList" :key="item._id" @click="bookSources(item._id)">
                    <img :src="item.cover" class="box-item">
                    <div class="box-item4 content">
                        <span class="author">{{item.title}}-----{{item.author}}</span>
                        <mt-badge size="small">{{item.cat}}</mt-badge>
                        <div>最新：{{item.lastChapter}}</div>
                        <div>简介{{item.shortIntro}}</div>
                    </div>
                </li>
            </ul>
        </div>
    </main>
</template>

<style lang="less" scoped rel="stylesheet/less">
.box {
    display: flex;
}

.box-item {
    flex: 1;
}

.box-item2 {
    flex: 2;
}

.box-item3 {
    flex: 3;
}

.box-item4 {
    flex: 4;
}

.books-box {
    width: 100%;
    margin: 0;
    padding: 0;
    li {
        list-style-type: none;
        font-size: 14px;
        margin-bottom: 5px;
        border-bottom: 1px solid #ccc;
        img {
            width: 50px;
            height: 100px;
        }
        .content {
            text-align: left;
            .author{
                font-weight: 600;
            }
        }
    }
}
</style>

<script type="text/javascript">

import { Header} from 'mint-ui';
import config from '@/api/api';
export default {
    component: {
        Header
    },
    data() {
        return {
            value: '',
            booksList: [],
            cpContent:''
        };
    },
    created() { },
    computed: {},
    methods: {
        // changSearch(value) {
        //     this.$http.get(`https://bird.ioliu.cn/v1/?url=${config.apis.bookSearch}`, {
        //         params: {
        //             query: value || '重生之娱乐星光',
        //             start: 0,
        //             limit: 10
        //         }
        //     }).then(({ data }) => {
        //         this.booksList = data.books.map(item => ({
        //             ...item,
        //             cover: item.cover.replace('/agent/', '')
        //         }));
        //         console.log(data.books)
        //     });
        // },
        search(value){
            this.$http.get(`${config.apis.search}`, {
                params: {
                    keyword: value || '重生之娱乐星光',
                    start: 0,
                    end: 10
                }
            }).then(({ data }) => {
                this.booksList = data.data.books.map(item => ({
                    ...item,
                    cover: item.cover.replace('http://statics.zhuishushenqi.com/agent/', '')
                }));
                console.table(data.data.books)
            });
        },
        //获取章节目录  1.根据书籍的id拿到，优质书源的id  2.根据书源的id获取章节目录
        bookSources(id) {
            //书源
            this.$http.get(`${config.apis.bookSources}`, {
                params: {
                    view: 'summary',
                    book: id
                }
            }).then(({ data }) => {
                this.bookChapters(data.data[0]._id)
                console.log(data.data[0]._id)
            });
        },
        bookChapters(id) {
            //目录
            this.$http.get(`${config.apis.bookChapters}${id}`).then(({ data }) => {
                this.chapters(encodeURIComponent(data.data.chapters[140].link))
                // console.table(data.data.chapters)
            });
        },
        chapters(link){
            //章节
            this.$http.get(`${config.apis.chapters}${link}`).then(({ data }) => {
                console.trace(`${config.apis.chapters}${link}`);
                this.cpContent=data.data.chapter.cpContent;
                console.info(data.data.chapter.cpContent)
                console.log(data.data.chapter.title)
            });
        }
    }
};
</script>